<template>

	<el-popover v-model:visible="visable" placement="bottom-start" :width="430" trigger="click">
		<template #reference>
			<div class="result">
				<div>{{result}}</div>
				<div>
					<!-- 样式实现动态翻转180度 -->
					<el-icon-arrowdown :class="{'rotate':visable}"></el-icon-arrowdown>

				</div>
			</div>

		</template>
		<div class="container">
			<el-row>
				<el-col :span="8">
					<el-radio-group v-model="radioValue" size="small">
						<el-radio-button label="按城市" value="按城市"></el-radio-button>
						<el-radio-button label="按省份" value="按省份"></el-radio-button>

					</el-radio-group>
				</el-col>
				<el-col :span="15">
					<el-select
					@change="cityChange"
					v-model="selectValue" 
					placeholder="请搜索城市" 
					size="small" 
					style="width: 140px" 
					filterable
					:filter-method="whyFilterMethod">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-col>
			</el-row>
			<template v-if="radioValue==='按城市'">
			
				<div class="city">
					<!-- 第一种方式 -->
					<!-- <div class="city-item"  v-for="(item,index) in cities" :key="index">
						{{index}}
					</div> -->
					<!-- 第二种方式 -->
					<div class="city-item" @click="cityItemClick(item)" v-for="(item,index) in Object.keys(cities)"
						:key="index">
						{{item}}
					</div>

				</div>
				<el-scrollbar max-height="100px">
					<template v-for="(item,index) in cities" :key="index">
						<el-row :id="index">
							<el-col :span="2">{{index}}:</el-col>
							<el-col :span="22" class="city-name">
								<div @click="clickItem(item1)" class="city-name-item" v-for="(item1,index1) in item"
									:key="index1">
									<div>{{item1.name}}</div>
								</div>
							</el-col>
						</el-row>
					</template>
				</el-scrollbar>
			</template>
			<template v-else>
				<div class="province">
					<!-- 第一种方式 -->
					<!-- <div class="city-item"  v-for="(item,index) in prs" :key="index">
						{{index}}
					</div> -->
					<!-- 第二种方式 -->
					<div class="province-item" @click="provinceItemClick(item)" v-for="(item,index) in Object.keys(prs)"
						:key="index">
						{{item}}
					</div>
				
				</div>
				<el-scrollbar max-height="100px">
					<template v-for="(item,index) in Object.values(prs)" :key="index">
						<template v-for="(item1,index1) in item" :key="index1">
							<el-row  :id="item1.id">
								<el-col :span="4">{{item1.name}}:</el-col>
								<el-col :span="20" class="province-name">
									<div @click="clickPItem(item11)" class="province-name-item" v-for="(item11,index11) in item1.data"
										:key="index11">
										<div>{{item11}}</div>
									</div>
								</el-col>
							</el-row>
						</template>
					</template>
				</el-scrollbar>
			</template>
		</div>
	</el-popover>


</template>

<script setup lang="ts">
	import { onMounted, ref, watch } from 'vue';
	import citiess from '../lib/city.ts'
	import provinces from '../lib/province'
	import type { cityInterface,proInterface } from './type';
	// 最终选择的结果
	let result = ref<string>('请选择')
	// 控制弹出层的显示
	let visable = ref<boolean>(false)
	// 单选框的值,按城市还是省份
	let radioValue = ref<string>('按城市')
	// 下拉框的值,搜索下拉框
	let selectValue = ref<string>('')
	// 所有城市列表
	let cities = ref(citiess.cities)
	
	let prs=ref(provinces.provinces)
	// 搜索框的值
	let searchValue=ref<string>('')
	
	// console.log(prs.value)

	let emits = defineEmits(['selectCity','selectProvince'])
	// 下拉框城市数据
	let options = ref<cityInterface[]>([])
	// 缓存所有的城市数据
	let allCity= ref<cityInterface[]>([])
	// 点击每个城市
	let clickItem = (val : cityInterface) => {
		// console.log(val)
		result.value = val.name
		visable.value = false
		emits('selectCity', val)
	}
	let clickPItem=(val:string)=>{
		// console.log(val)
		result.value = val
		emits('selectProvince',val)
	}
	let cityItemClick = (val : string) => {
		// console.log(val)
		let el = document.getElementById(val);
		console.log(el)
		if (el) el.scrollIntoView()
	}
	let provinceItemClick=(val : string)=>{
		// console.log(val)
		let el = document.getElementById(val);
		// console.log(el)
		if (el) el.scrollIntoView()
	}
	onMounted(()=>{
		let values=Object.values(cities.value).flat(2)
		// console.log(values)
		options.value=values;
		allCity.value=values;
	})
	// 自定义查找
	let whyFilterMethod=(val:string)=>{
		searchValue.value=val
		let values=allCity.value
		// console.log(val)
		if(val===''){
			
			// console.log(values)
			options.value=values;
		}
		else{
			if (radioValue.value ==='按城市'){ 
				options.value=values.filter(item=>{
					return item.name.includes(val)||item.spell.includes(val)
				});
			}
			else{
				options.value=values.filter(item=>{
					return item.name.includes(val) 
				});
			}
			
		}
	}
	// 下拉框选择事件
	let cityChange=(val:number)=>{
		// console.log(val)
		let selectCity=allCity.value.find(item=>{
			return item.id=val
		})!
		// console.log(selectCity.name)
		result.value=selectCity.name;
		if (radioValue.value ==='按城市'){
			emits('selectCity', selectCity)
		}
		else{
			emits('selectProvince', selectCity.name)
		}
		
	}
	 
</script>
<style lang="scss" scoped>
	.result {
		display: flex;
		align-items: center;
		width: fit-content;
		cursor: pointer;
	}

	svg {
		width: 1em;
		height: 1em;
		position: relative;
		top: 2px;
		margin-left: 4px;
		transition: all 0.25s linear;
	}

	.rotate {
		transform: rotate(180deg);
	}

	.container {
		padding: 6px;
	}

	.city , .province {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10px;

		&-item {
			padding: 3px 6px;
			margin-right: 8px;
			margin-bottom: 8px;
			border: 1px solid #eee;

		}
	}

	.city-name, .province-name {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		&-item {
			margin-right: 3px;
			margin-bottom: 3px;
			cursor: pointer;
		}
	}
	
	// .province {
	// 	display: flex;
	// 	align-items: center;
	// 	flex-wrap: wrap;
	// 	margin-top: 10px;
	
	// 	&-item {
	// 		padding: 3px 6px;
	// 		margin-right: 8px;
	// 		margin-bottom: 8px;
	// 		border: 1px solid #eee;
	
	// 	}
	// }
	
	// .province-name {
	// 	display: flex;
	// 	align-items: center;
	// 	flex-wrap: wrap;
	
	// 	&-item {
	// 		margin-right: 3px;
	// 		margin-bottom: 3px;
	// 		cursor: pointer;
	// 	}
	// }
</style>